/**
* @description: 待办工单 -> 通信电源巡视 -> 已巡视详情
**/

<template>
  <div class="power-detail-wrap">
    <nav-bar class="header" back title="通信电源巡视详情" @goBack="goBack" />

    <!-- 基本信息 -->
    <div class="power-info">
      <plateTitle title="基本信息" class="plate-title-1" />
      <view class="power-info-container">
        <van-cell-group>
          <van-cell v-for="(item, index) in powerInfoData" :title="item.title" :value="item.value" :key="index" />
        </van-cell-group>
      </view>

      <plateTitle title="巡视信息" :isRequired="false" class="plate-title-1" />

      <!-- 巡视照片 -->
      <view class="patrol-info-container" v-if="originData.serviceState === 4">
        <view>巡视照片</view>
        <van-divider dashed />
        <div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
        <div v-else class="image-wrap">
          <div class="image-list">
            <div
              class="upload-button"
              v-for="(imgItem, index) in files"
              v-if="imgItem.img"
              :style="{'background-image': `url(${imgItem.bgImg})`}"
            >
              <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
            </div>
          </div>
        </div>
      </view>

      <!-- 备注 -->
      <view class="remark-info-container" v-if="originData.serviceState === 4">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" disabled :value="textareaValue">
          </textarea>
        </div>
      </view>

      <!-- 巡视结果 -->
      <view class="result-info-container">
        <van-cell-group>
          <van-cell v-for="(item, index) in resultInfoData" :key="index" :title="item.title" :value="item.value" :class="item.color" />
        </van-cell-group>
      </view>
      <van-button block v-if="isEditable" @click="reEdit">重新编辑</van-button>

      <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
        <van-swipe>
          <div v-for="(image, index) in files" :key="index">
            <van-swipe-item v-if="image.img" style="text-align: center;">
              <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
              <img :src="image.img" />
            </van-swipe-item>
          </div>
        </van-swipe>
      </van-popup>

    </div>

  </div>
</template>

<script>
import config from '../../../../common/config'
import navBar from '../../../../components/common/nav-bar'
import plateTitle from '../../../../components/business/plateTitle.vue'
let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "分配屛照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../static/img/bg_fenpeiping.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "分配屛照片",
    type: "OTHER",
    bgImg: require("../../../../static/img/bg_fenpeiping.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];

export default {
  name: 'powerDetail', // 通信电源详情
  data() {
    return {
      baseUrl: '',
      powerInfoData: [],
      resultInfoData: [],
      originData: [], // 原始数据
      files: fileTemplate,
      showPreview: false,
      taskResult: '',
      textareaValue: '',
      taskId: '', // 页面返回上一级需要携带的id
      taskState: '', //携带到计划工单详情 做返回参数
      taskSiteName: '', //携带到计划工单详情 做返回参数
      taskSiteId: '',
      state: '',
      isEditable: false, // 是否可重新编辑
    }
  },
  components: {
    navBar,
    plateTitle
  },
  onLoad(e) {
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.taskId = e.taskId
    this.taskSiteId = e.taskSiteId
    this.taskSiteName = e.taskSiteName
    this.state = e.state
    this.taskState = e.taskState
    this.getPowDetails()
  },
  methods: {
    goBack() {
      // 待办工单下此设备详情（无已完成/未完成状态）返回设备列表
      // uni.navigateBack()
      uni.navigateTo({
        url: `/pages/workBench/todoTask/powerTour/powerTour?taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&state=${this.state}&taskSiteName=${this.taskSiteName}`
      })
    },
    // 获取详情
    getPowDetails() {
      let parasm = {
        objId: this.taskId
      }
      this.$api.getPowDetails(parasm).then(res => {
        if (res.data) {
          // 如果当前项为当前操作人巡视完成的，状态为未完成，设备状态为更新或新增，则显示编辑按钮支持编辑，状态为未完成，设备状态为更新或新增，则显示编辑按钮支持编辑
          this.isEditable = (
            res.data.tourOperId === this.$store.state.userData.userId &&
            this.state !== '99' &&
            (res.data.serviceState === 3 || res.data.serviceState === 4)
          )
          this.taskId = res.data.taskId
          this.originData = res.data
          this.powerInfoData = [
            {
              title: '通信电源名称',
              value: res.data.equName
            },
            {
              title: '所属站点',
              value: res.data.sitename
            },
            {
              title: '所属机房',
              value: res.data.parRoom
            },
            {
              title: '所属机柜编号',
              value: res.data.parRack
            },
            {
              title: '所属机柜屏眉',
              value: res.data.parRackScreen
            },
            {
              title: '通信电源顺序',
              value: res.data.serilanum
            },
            {
              title: '实物ID',
              value: res.data.entityid
            },
            {
              title: '通信电源制造厂商',
              value: res.data.powerTechType
            },
            {
              title: '通信电源型号',
              value: res.data.powerModelnumber
            },
            {
              title: '满配整流容量（A）',
              value: res.data.powerFullCapacity
            },
            {
              title: '当前配置整流容量（A）',
              value: res.data.powerPresentCapacity
            },
            {
              title: '整流模块型号',
              value: res.data.powerRectification
            },
            {
              title: '单个整流模块容量（A）',
              value: res.data.powerSingle
            },
            {
              title: '通信电源投运时间',
              value: res.data.powerBegTim
            },
            {
              title: '配套蓄电池组制造厂商',
              value: res.data.accumProducer
            },
            {
              title: '配套蓄电池组型号',
              value: res.data.accumModelnumber
            },
            {
              title: '配套蓄电池类型',
              value: res.data.accumType
            },
            {
              title: '配套蓄电池组数量',
              value: res.data.accumNum
            },
            {
              title: '蓄电池组投运时间',
              value: res.data.accumBegTim
            },
            {
              title: '运行状态',
              value: res.data.runState
            },
            {
              title: '每组蓄电池容量（Ah）',
              value: res.data.accumCapacity
            },
            {
              title: '当前负载电流（A）',
              value: res.data.powerLoadCurrent
            },
            {
              title: '蓄电池实测总容量（Ah）',
              value: res.data.accumSumCapacity
            }
          ]
          this.textareaValue = res.data.remark
          let color = "";
          if (res.data.serviceState === 1) {
            this.taskResult = '一致'
            color = "blue"
          } else if (res.data.serviceState === 2) {
            this.taskResult = '不存在'
            color = "red"
          } else if (res.data.serviceState === 3) {
            this.taskResult = '新增'
            color = "green"
          } else if (res.data.serviceState === 4) {
            this.taskResult = '更新'
            color = "yellow"
          }
          this.resultInfoData = [
            {
              title: '巡视结果',
              value: this.taskResult,
              color: color
            },
            {
              title: '巡视人',
              value: res.data.tourOperName
            },
            {
              title: '巡视时间',
              value: res.data.tourTim
            }
          ]
          this.files = this.files.map((item) => {
            return {
              ...item,
              img: res.data.photoMap[item.type] ? this.baseUrl + res.data.photoMap[item.type]: '',
            }
          })
        }
      })
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

          })
          .catch(() => {
            // on cancel
          })
      }
    },

    // 重新编辑
    reEdit() {
      let params = this.originData;
      uni.navigateTo({
        url: `/pages/workBench/todoTask/powerTour/completePower?type=update&objId=${params.objId}&taskId=${params.taskId}&taskSiteId=${this.taskSiteId}&state=${this.state}&taskSiteName=${this.taskSiteName}&reTourCheck=0`
      });

      // 设备状态（1 一致  2  不存在  3  新增   4  更新）
      // 判断上次巡视结果，如果为一致/不存在，跳转核查页
      // let params = this.originData;
      // if(params.serviceState === 1 || params.serviceState === 2) {
      //   uni.navigateTo({
      //     url: `/pages/workBench/todoTask/powerTour/powerInspect?objId=${params.objId}&taskSiteId=${params.siteid}&state=${this.state}&taskId=${params.taskId}&taskSiteName=${params.sitename}&reTourCheck=0`
      //   })
      // }
      // // 如果为更新/新增，跳转完善页
      // else if(params.serviceState === 4 || params.serviceState === 3) {
      //   uni.navigateTo({
      //     url: `/pages/workBench/todoTask/powerTour/completePower?type=update&objId=${params.objId}&taskId=${params.taskId}&taskSiteId=${params.siteid}&state=${this.state}&taskSiteName=${params.sitename}&reTourCheck=0`
      //   })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.power-detail-wrap {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242, 246, 250, 1);

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }
  .power-state {
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .power-state-title {
      font-size: px2vw(42);
    }
    .power-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.power-state-on {
        color: rgba(255, 67, 85, 1);
        background-color: rgba(255, 67, 85, 0.1);
      }

      &.power-state-off {
        color: rgba(65, 220, 131, 1);
        background-color: rgba(65, 220, 131, 0.1);
      }
    }
  }

  .power-info {
    width: calc(100% - #{px2vw(60)});
    margin: auto;
    padding-bottom: px2vh(30);
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .power-info-container,
    .result-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;
    }

    .result-info-container {
      .yellow {
        /deep/.van-cell__value {
          color: #FFAD0E;
        }
      }
      .blue {
        /deep/.van-cell__value {
          color: #417ADC;
        }
      }
      .green {
        /deep/.van-cell__value {
          color: #41DC83;
        }
      }
      .red {
        /deep/ .van-cell__value {
          color: #FF4355;
        }
      }
    }

    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);
      .remark-wrap {
        background-color: #fafafa;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        .remark-text {
          height: px2vh(150);
        }
      }
    }

    .patrol-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;

      /deep/.van-radio {
        margin-right: px2vw(139.5);
      }

      .image-wrap {
        width: 100%;
        display: flex;
        img {
          width: px2vw(215);
          height: px2vw(215);
          margin-right: px2vw(40);
          border-radius: px2vw(6);
        }

        .image-list {
          width: 100%;
          display: flex;
          .upload-button {
            width: px2vw(215);
            height: px2vw(215);
            background-size: cover;
            margin-right: px2vw(40);
            position: relative;
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }

  .fibre-info {
    .fibre-rate {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(60);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .fibre-rate-title {
        font-size: px2vw(42);
        color: rgba(65, 122, 220, 1);
        margin-left: px2vw(40);
      }

      .fibre-rate-chart {
        width: px2vw(660);
        height: px2vh(34);
        margin: 0 px2vw(27) 0 px2vw(30);
        background-color: #ecf1fb;
        .fibre-rate-chart-off {
          width: 75%;
          height: 100%;
          background: repeating-linear-gradient(
            135deg,
            #417adc,
            #417adc #{px2vw(16)},
            #b3caf1 #{px2vw(16)},
            #b3caf1 #{px2vw(32)}
          );
        }
      }

      .fibre-rate-text {
        font-size: px2vw(42);
        margin-right: px2vw(40);
        font-weight: bold;
        color: #7c7c7c;
        .fibre-rate-off {
          color: #417adc;
        }
      }
    }
  }

  .fibre-content-title {
    width: calc(100% - #{px2vw(80)});
    box-sizing: border-box;
    margin: px2vh(0) px2vw(40) px2vh(18);
    .condition-bar {
      display: flex;
      justify-content: center;
      .condition-item {
        height: px2vh(56);
        background-color: rgba(65, 122, 220, 0.1);
        border: #{px2vw(2)} solid rgba(65, 122, 220, 1);
        color: rgba(65, 122, 220, 1);
        border-radius: px2vw(6);
        font-size: px2vw(30);
        padding: 0 px2vw(16) 0 px2vw(19);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 px2vw(5);
        &:last-child {
          margin-right: 0;
        }
        &.condition-item-checked {
          background-color: rgba(65, 122, 220, 1);
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .fibre-pair-list {
    .fibre-pair-item {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(40);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .replace-index {
        margin: 0 px2vw(28) 0 px2vw(40);
        width: px2vw(64);
        height: px2vw(64);
        border-radius: 50%;
        background: radial-gradient(
          circle at center,
          #417adc,
          #417adc #{px2vw(23)},
          #ffffff #{px2vw(23)},
          #ffffff #{px2vw(26)},
          #417adc #{px2vw(26)},
          #417adc 100%
        );
        color: #ffffff;
        font-size: px2vw(36);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .replace-text {
        font-size: px2vw(42);
        color: #666666;
      }

      .replace-state {
        font-size: px2vw(42);
        margin-right: px2vw(39);

        &.replace-state-on {
          color: #41dc83;
        }

        &.replace-state-off {
          color: #ff4355;
        }
      }
    }
  }
  /deep/.van-button {
    margin-top: px2vh(30);
    height: px2vh(120);
    color: #fff;
    background-color: #417adc;
    border: 1px solid #417adc;
    border-radius: px2vh(60);
  }
}
</style>
